<template>
  <div class="_fc_fetch">
    <DragForm v-model:api="api" :modelValue="formValue" :rule="rule" :option="option" @change="input"/>
  </div>
</template>

<script>
import debounce from '@form-create/utils/lib/debounce';
import is from '@form-create/utils/lib/type';
import {designerForm} from '../utils/form';
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'Fetch',
  props: {
    modelValue: [Object, String],
    to: String,
  },
  components: {
    DragForm: designerForm.$form(),
  },
  inject: ['designer'],
  computed: {
    formValue() {
      const val = this.modelValue;
      if (!val) return {};
      if (is.String(val)) {
        return {
          action: val
        };
      }
      return val;
    }
  },
  data() {
    const t = this.designer.setupState.t;
    return {
      api: {},
      fetch: {},
      t,
      option: {
        form: {
          autoLabelWidth: true,
          layout: 'horizontal',
          labelPosition: 'right',
          size: 'small',
          labelWidth: '90px'
        },
        submitBtn: false,
      },
      rule: [
        {
          type: 'input',
          field: 'action',
          title: t('fetch.action') + ': ',
          validate: [{required: true, message: t('fetch.actionRequired')}]
        },
        {
          type: 'select',
          field: 'method',
          title: t('fetch.method') + ': ',
          value: 'GET',
          options: [
            {
              label: 'GET',
              value: 'GET'
            },
            {
              label: 'POST',
              value: 'POST'
            },
          ],
          control: [
            {
              value: 'POST',
              rule: [
                {
                  type: 'select',
                  field: 'dataType',
                  title: t('fetch.dataType') + ': ',
                  value: 'FormData',
                  options: [
                    {
                      label: 'FormData',
                      value: 'FormData'
                    },
                    {
                      label: 'JSON',
                      value: 'JSON'
                    }
                  ]
                },
              ]
            }
          ]
        },
        {
          type: 'Struct',
          field: 'data',
          title: t('fetch.data') + ': ',
          value: {},
          props: {
            defaultValue: {},
          }
        },
        {
          type: 'Struct',
          field: 'headers',
          title: t('fetch.headers') + ': ',
          value: {},
          props: {
            defaultValue: {},
          }
        },
        {
          type: 'Struct',
          field: 'parse',
          title: t('fetch.parse') + ': ',
          info: t('fetch.parseInfo'),
          value: null,
          props: {
            defaultValue: function parse(res) {
              return res
            },
          }
        }
      ]
    };
  },
  methods: {
    parseFn(v) {
      return (new Function('return ' + v))();
    },
    _input() {
      this.api.submit((formData) => {
        formData.to = this.to || 'options';
        // if (formData._parse) formData.parse = this.parseFn(formData._parse);
        this.$emit('update:modelValue', formData);
      });
    },
    input: debounce(function () {
      this._input();
    }, 1000),
  },
  mounted() {
    this._input();
  }
});
</script>
<style>
._fc_fetch .arco-form-item-label {
  float: left;
  display: inline-block;
  text-align: right;
  padding-right: 5px;
}

._fc_fetch {
  background-color: #bfdaf7;
  padding: 10px;
}
</style>
